<template>
<!--课程列表-->
  <div class="auto">
    <ul class="zhibo_list" >
      <li class="clearfix" @click="detail(index)" v-for="(course,index) in courses" v-if="online == 0">
        <div class="curse">
          <img :src="course.courseImage" alt="" width="280" height="150">
          <!--<span>{{course.courseBeginDate}}</span>-->
        </div>
        <p>{{course.courseTitle}}</p>
        <div class="msg">
          <!--<img :src="course.lecturerImg" alt="" width="28">{{course.lecturerName}}-->
          <span >￥{{course.coursePrice}}</span>
        </div>
      </li>
      <li @click="detail(index)" v-for="(course,index) in courses" v-if="online == 1">
        <div class="curse">
          <img :src="course.courseImage" alt="" width="280" height="150">
          <div class="bg"></div>
          <img src="../../assets/play.png" alt="" width="50" class="play">
          <div class="vip" v-if="course.isVipFree == 0 && course.isFree == 1">VIP</div>
        </div>
        <p>{{course.courseTitle}}</p>
        <div class="msg">
          <span class="num">{{course.courseCount}}视频</span><img src="../../assets/usericon.png" alt="" width="16" class="ren"><span class="names">{{course.lecturerName}}</span>
          <span class="pull-right mianfei" v-if="course.coursePrice == 0">免费</span>
          <span class="pull-right vipfree" v-else-if="course.isVipFree == 0 && course.isFree == 1 && isVip > 0">￥{{course.coursePrice}}</span>
          <span class="pull-right" v-else>￥{{course.coursePrice}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .zhibo_list{
    font-size: 0;
    padding-top: 30px;
    text-align: left;
    li{
      display: inline-block;
      width: 282px;
      border:1px solid #ddd;
      text-align: left;
      margin:0 24px 30px 0;
      background-color: #fff;
      cursor: pointer;
      .curse{
        position: relative;
        .bg{
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
          background-color: rgba(0,0,0,0.39);
        }
        .play{
          position: absolute;
          z-index: 9;
          top:50%;
          left: 50%;
          margin-left: -25px;
          margin-top: -25px;
        }
        .vip{
          background: url("../../assets/vip.png") no-repeat;
          width: 24px;
          height: 36px;
          background-size: 100% 100%;
          font-size: 12px;
          color: #fff;
          line-height: 30px;
          text-align: center;
          position: absolute;
          right: 0;
          top:0
        }
        span{
          background-color: #ff9900;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          padding: 3px 5px;
          position: absolute;
          bottom: 10px;
          left: 0;
        }
      }
      >p{
        font-size: 14px;
        color: #333;
        padding: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .msg{
        font-size: 14px;
        color: #333;
        padding: 0px 15px 15px;
        .ren{
          vertical-align: middle;
          margin-right: 10px;
        }
        img:not(.ren){
          border-radius: 50%;
          margin-right: 10px;
          vertical-align: middle;
        }
        .num{
          color: #999;
          margin-right: 15px;
        }
        .names{
          color: #666;
        }
        .mianfei{
          color: #ff3300;
        }
        .vipfree{
          text-decoration: line-through;
          color: #ff3300;
        }
      }
    }
    li:hover{
      transform: translateY(-10px);
      border-color: #957960;
      transition: all 0.3s;
    }
    li:nth-child(4n){
      margin-right: 0;
    }
  }
  .lookmore{
    font-size: 14px;
    color: #666;
    background-color: #f5f5f5;
    border-color: #ddd;
    height: 40px;
    width: 140px;
    margin: 10px 0 40px;
    .ivu-icon{
      margin-bottom: 2px;
      color: #999;
    }
  }
</style>
<script type="text/ecmascript-6">
    export default {
        name: '',
        props: [
          'courses','online','isVip'
        ],
        data() {
            return {};
        },
        methods: {
          //判断组件展示的是线下课程还是线上课程,进行详情页跳转
          detail(index){
            let cour = this.courses[index];
            //线上课程
            if(this.online === 1){
              this.$router.push({
                name: 'coursedetail',
                query:{courseId:cour.id},
              })
            }
            //线下课程
            if(this.online === 0){
              this.$router.push({
                name:'offcoursedetail',
                query:{courseId:cour.id},
              })
            }
          }
        },
        created() {
        },
        components: {}
    }
</script>
